<template>
  <div class="mod-config">

    <el-row style="height: 100%;">
      <el-col :span="2">
        <el-tabs tab-position="left" v-model="tabIndex"  @tab-click="tabClick">
          <el-tab-pane label="话题审核" name="1"></el-tab-pane>
          <el-tab-pane label="评论审核" name="2"></el-tab-pane>
        </el-tabs>
      </el-col>

      <el-col :span="22">
<!--        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">-->
<!--          <el-form-item>-->
<!--            <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>-->
<!--          </el-form-item>-->
<!--          <el-form-item>-->
<!--            <el-button @click="getDataList()">查询</el-button>-->
<!--          </el-form-item>-->
<!--        </el-form>-->
        <el-table

          :data="dataList"
          border
          v-loading="dataListLoading"

          style="width: 100%;">
<!--                    @selection-change="selectionChangeHandle"-->
          <el-table-column
            type="selection"
            header-align="center"
            align="center"
            width="40">
          </el-table-column>
          <!--      <el-table-column-->
          <!--        prop="id"-->
          <!--        header-align="center"-->
          <!--        align="center"-->
          <!--        width="150"-->
          <!--        label="唯一ID">-->
          <!--      </el-table-column>-->
          <el-table-column
            prop="userName"
            header-align="center"
            align="center"
            width="300"
            label="发布用户">
          </el-table-column>
<!--          <el-table-column-->
<!--            prop="listImg"-->
<!--            header-align="center"-->
<!--            align="center"-->
<!--            width="120"-->
<!--            label="板块图片">-->
<!--            <template slot-scope="scope">-->
<!--              <img style="width: 50px" :src="scope.row.listImg" alt="" />-->
<!--            </template>-->
<!--          </el-table-column>-->
          <el-table-column
            prop="content"
            header-align="center"
            align="center"
            width=""
            sortable
            label="内容详情">
            <template slot-scope="scope">
              <el-button type="info" plain @click="openContentPage(scope.row.content)">详情</el-button>
<!--              <div v-html="scope.row.content"></div>-->
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            header-align="center"
            align="center"
            width="180"
            sortable
            label="发布时间">
          </el-table-column>


          <el-table-column
            header-align="center"
            align="center"
            width="300"
            label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="nospeakDialog(scope.row.memberId)"
                         :disabled="scope.row.nospeak == 1">
                  <div v-if="scope.row.nospeak == 1">用户已被禁言</div>
                  <div v-else>禁言该用户</div>
              </el-button>

              <el-button type="text" size="small" @click="disableMember(scope.row.memberId)"
                         :disabled="scope.row.memberStatus != 1">
                <template>
                  <div v-if="scope.row.memberStatus == 2">用户已注销</div>
                  <div v-if="scope.row.memberStatus == 3">用户已被禁用</div>
                  <div v-else>封禁该用户</div>
                </template>
              </el-button>

<!--              <el-button type="text" size="small" @click="">封禁该用户</el-button>-->
              <el-button type="text" size="small" @click="passHandle(scope.row.id,1)">通过</el-button>
              <el-button type="text" size="small" @click="passFailClick(scope.row.id)">不通过</el-button>
              <el-button type="text" size="small" @click="deleted(scope.row.id)">删除</el-button>

            </template>
          </el-table-column>



        </el-table>
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </el-col>
    </el-row>


    <el-dialog
      title="内容详情"
      :visible.sync="contentPageVisible"
      :before-close="handleContentPageClose"
      width="80%">
        <div v-html="dialogContentData"></div>
    </el-dialog>


    <el-dialog :title="'禁言'" :visible.sync="nospeakVisible">
      <el-form :model="nospeakObj" ref="nospeakRef" label-position="top" :rules="dataRule">
        <el-form-item label="时长">
          <el-input-number v-model="nospeakObj.timeNum" :min="1" :max="10000" label="时长"></el-input-number>
        </el-form-item>
        <el-form-item label="单位">
          <el-radio v-model="nospeakObj.timeUnit" label="1">分</el-radio>
          <el-radio v-model="nospeakObj.timeUnit" label="2">时</el-radio>
          <el-radio v-model="nospeakObj.timeUnit" label="3">天</el-radio>
          <el-radio v-model="nospeakObj.timeUnit" label="4">月</el-radio>
          <el-radio v-model="nospeakObj.timeUnit" label="5">年</el-radio>
        </el-form-item>
        <el-form-item label="禁言理由" prop="reason">
          <el-input v-model="nospeakObj.reason" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="nospeakVisible = false">取 消</el-button>
        <el-button type="primary" @click="nospeak">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="审核不通过" :visible.sync="passFailVisible">
      <el-form>
        <el-form-item label="拒绝理由" label-width="200">
          <el-input v-model="passFailMessage" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="passFailVisible = false">取 消</el-button>
        <el-button type="primary" @click="passFailHandle()">确 定</el-button>
      </div>
    </el-dialog>


  </div>


</template>

<script>

export default {
  data () {
    return {
      //列表数据
      dataList:[],
      //分页参数
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      //加载控制变量
      dataListLoading:'',
      //标签页对应下标
      tabIndex:'1',
      //控制内容弹窗是否显示
      contentPageVisible:false,
      //内容详情弹窗的数据
      dialogContentData:'',
      //获取列表数据名称 根据选择标签栏不同而变化
      dataListRouteName:'communitytopic',
      nospeakVisible:false,
      nospeakObj:{
        memberId:'',
        timeNum:'0',
        timeUnit:'1',
        reason:''
      },
      passFailMessage:'',
      passFailId:'',
      passFailVisible:false,
      dataRule: {
        reason: [
          { required: true, message: '请填写理由', trigger: 'blur' }
        ]
      }
      // queryObj: {
      //   pageParams: {
      //     page: 1,  //当前页
      //     limit:10,//每页记录数
      //     sidx: "sort",
      //     order: "",
      //   }
      // }
    }
  },
  components: {

  },

  mounted () {
    this.getDataList()
  },
  methods: {
    //获取数据列表
    getDataList () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl(`/forum/${this.dataListRouteName}/getListForPass`),
        method: 'get',
        params: this.$http.adornParams({
          'page': this.pageIndex,
          'limit': this.pageSize,
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          console.log(data)
          this.dataList = data.page.list
          this.totalPage = data.page.totalCount
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 多选
    selectionChangeHandle (val) {
      this.dataListSelections = val
    },
    //打开内容弹窗调用事件
    openContentPage(content){
      this.contentPageVisible = true
      this.dialogContentData = content
    },
    //关闭内容弹窗调用事件
    handleContentPageClose(){
      //内容清空
      this.dialogContentData = ''
      this.contentPageVisible = false
    },
    //审核通过点击事件
    passHandle(id,passStatus){
      this.$http({
        //根据passStatus 调用不同路径
        url: this.$http.adornUrl(`/forum/${this.dataListRouteName}/passed/${id}`),
        method: 'post',
      }).then(({data}) => {
        if (data.code === 0) {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.getDataList()
            }
          })
        }
      })
    },
    //审核不通过点击世界
    passFailClick(id){
      this.passFailId = id;
      this.passFailVisible = true;
    },
    passFailHandle(){
      this.$http({
        //根据passStatus 调用不同路径
        url: this.$http.adornUrl(`/forum/${this.dataListRouteName}/passedFailed/${this.passFailId}`),
        method: 'post',
        data:this.passFailMessage
      }).then(({data}) => {
        if (data.code === 0) {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.passFailVisible = false;
              this.getDataList()
            }
          })
        }
      })
    }
    ,
    //标签栏改变事件
    tabClick(){
      //根据不同下标,改变地址路由
      //如果标签栏为1 则为话题审核
      if (this.tabIndex == 1){
        this.dataListRouteName = 'communitytopic'
      }else if (this.tabIndex == 2){
        this.dataListRouteName = 'communitytopiccomment'
      }
      this.getDataList();
    },
    nospeakDialog(memberId){
      this.nospeakVisible = true;
      this.nospeakObj={memberId:memberId,timeNum:'0',timeUnit:'1',reason:''}
    },
    //禁言
    nospeak(){
      this.$refs['nospeakRef'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl("/forum/member/nospeak"),
            method: 'post',
            data: this.$http.adornData(this.nospeakObj)
          }).then(({data}) => {
            this.getDataList();
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1000,
              onClose: () => {
                this.nospeakVisible = false
              }
            })
          })
        }
      })
    },
    //禁用或者激活账号
    disableMember(memberId){

      this.$confirm(`确定禁用此账号吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        this.$http({
          url: this.$http.adornUrl(`/forum/member/disable/${memberId}`),
          method: 'post'
        }).then((data)=>{
          this.getDataList();
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1000,
          })
        })
      })
    },
    deleted(id){
      var ids=[id]
      this.$confirm(`确定删除吗?吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        this.$http({
          url: this.$http.adornUrl(`/forum/${this.dataListRouteName}/delete`),
          method: 'post',
          data: this.$http.adornData(ids,false)
        }).then((data)=>{
          console.log(data)
          this.getDataList();
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1000,
          })
        })
      })
    }

  }
}
</script>
